Ext.onReady(function(){
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';
	//定义查询框
	var formPanel = new Ext.form.FormPanel({
		region: 'north',
		labelWidth: 75, // label settings here cascade unless overridden
		frame: true,
		border: false,
		height: 100,
		title: '开销管理',
		labelAlign: 'right',
		buttonAlign: 'center',
		items: [{//行1 这是一个panel
				layout:'column',
				items:[{
					layout:'form',
					columnWidth : .33,
					items:[{
						xtype:'textfield',
						fieldLabel:'开销内容',
						name:'spenddesc',
						id:'spenddesc',
						width: 200
					}]
				},{
					layout:'form',
					columnWidth:.33,
					items:[{
						xtype:"combo",
						fieldLabel:"消费类型",
						mode:"remote",
						width: 200,
						editable:false,
						loadingText:"请稍等...",
						id:"spendtype",	
						valueField:"id",
						displayField:"name",
						triggerAction:"all",
						emptyText:"请选择消费类型",
						store:new Ext.data.JsonStore({
									url:'spendmanager!getSpendTypeList.action',
									autoLoad:true,
									root:"spendtype",
									fields:["name","id"]						
								})
					}]
				},{
					layout:'form',
					columnWidth : .33,
					items:[{
						xtype:'datefield',
						fieldLabel:'消费时间',
						format:'Y-m-d',
						name:'spenddate',
						id:'spenddate',
						width: 200
					}]
				}]
			
		}
       
		],
		buttons: [{
			text: '查询',
			iconCls: 'query',
			handler: function(){
				search();
			}
			
		}, {
			text: '重置',
			iconCls: 'reset',
			handler: function(){
				formPanel.getForm().reset();
			}
			
		}]
	});
	
	//定义行选择
	var sm = new Ext.grid.CheckboxSelectionModel();
	
	//定义工具栏	
	var bar = new Ext.Toolbar({
		buttons: [{
			text: '新增',
			iconCls: 'add',
			handler: add
		}, {
			text: '修改',
			iconCls: 'modify',
			handler: modify
		}, {
			text: '删除',
			iconCls: 'delete',
			handler: remove
		}]
	});
	//定义数据源store
	var gridStore = new Ext.data.JsonStore({
		url: "spendmanager!getSpendInfos.action",
		root: 'result',
		totalProperty:'count',
		fields: ['id', 'desc', 'price', 'sdate','type','typeName']
	});
	
	//定义分页栏
	var pageBar = new Ext.PagingToolbar({
		pageSize: 5,
		store: gridStore,
		displayInfo: true,
		displayMsg: '显示第 {0} 条到第 {1} 条记录，共 {2} 条',
		emptyMsg: "没有记录"
	});
	
	gridStore.on('beforeload', function(){
		gridStore.baseParams = {
			type: Ext.getCmp("spendtype").getValue(),
			sdate:Ext.getCmp("spenddate").getRawValue(),
			sdesc:Ext.getCmp("spenddesc").getValue()
		};
	});
	//默认自动加载
	search();

	//定义数据展示区域panel
	var grid = new Ext.grid.GridPanel({
		region: 'center',
		autoLoad: false,
		frame: true,
		border: false,
		tbar: bar,
		bbar: pageBar,
		loadMask: true,
		cm: new Ext.grid.ColumnModel([new Ext.grid.RowNumberer({
			width: 30
		}), sm, {
			dataIndex: 'id',
			header: '编号',
			hidden: true,
			sortable: true
		}, {
			dataIndex: 'desc',
			header: '消费内容',
			hidden: false,
			sortable: true
		}, {
			dataIndex: 'price',
			header: '价格',
			hidden: false,
			sortable: true
		}, {
			dataIndex: 'sdate',
			header: '消费日期',
			hidden: false,
			sortable: true
		},{
			dataIndex:'typeName',
			header:'类型',
			hidden: false,
			sortable:true
		},{
			dataIndex:'type',
			header:'类型编号',
			hidden: true,
			sortable:true
		}]),
		sm: sm,
		store: gridStore //数据源
	});
	//定义界面
	var viewPort = new Ext.Viewport({
		layout: 'border',
		items: [formPanel, grid]
	});
	
	//定义新增表单
	var sform = new Ext.form.FormPanel({	
		frame: true,	
		border:false,
		bodyStyle: 'padding:25px;',
		items: [{
			xtype: 'textfield',
			fieldLabel: '消费内容',
			allowBlank: false,
			width:165,
			blankText: '请输入消费消费内容!',
			id: 'sdesc'
		},{
			xtype:"combo",
			fieldLabel:"消费类型",
			mode:"remote",
			editable:false,
			allowBlank:false,
			blankText:'请选择消费类型',
			loadingText:"请稍等...",
			id:"stype",						
			displayField:"name",
			valueField:"id",
			triggerAction:"all",
			emptyText:"请选择消费类型",
			store:new Ext.data.JsonStore({
						url:'spendmanager!getSpendTypeList.action',
						autoLoad:true,
						root:"spendtype",
						fields:["name","id"]						
					})
		},{
			xtype:'numberfield',
			fieldLabel:'价格',
			width:165,
			allowBlank:false,
			blankText:'请输入价格!',
			nanText:'请输入合法数字!',
			minValue:0,
			id:'sprice'
		},{
			xtype:'datefield',
			fieldLabel:'消费时间',
			width:165,
			format:'Y-m-d',
			invalidText:'请输入正确的时间，如1900-01-01',
			allowBlank:false,
			blankText:'请输入消费时间!',
			id:'sdate'
		}]
	});
	
	//定义新增页面
	var addWin = new Ext.Window({
		title: '添加类型',
		frame: true,
		width:370,
		resizable:false,
		modal: true,
		collapsible: true,
		labelAlign: 'left',
		buttonAlign: 'center',
		items:[sform],
		buttons: [{
			text: '保存',
			iconCls: 'save',
			handler: addSave
		}, {
			text: ' 取消',
			iconCls: 'cancel',
			handler: function(){
				sform.getForm().reset();
				addWin.hide();
			}
		}]
	});
	
	
	
	/**
	 * 查找
	 */
	function search(){
		gridStore.load({
			params: {
				start: 0,
				limit: 5
			}
		});
	}
	/**
	 * 新增
	 */
	function add(){
		addWin.show();
	}
	function modify(){
		alert('修改.....');
	}
	function remove(){
		alert('删除.....');
	}
	function addSave(){
		var v_type = Ext.getCmp("stype").getValue();
		var v_desc = Ext.getCmp('sdesc').getValue();
		var v_price = Ext.getCmp('sprice').getValue();
		var v_date = Ext.getCmp('sdate').getRawValue();
		if(sform.getForm().isValid()){
			Ext.Ajax.request({
				url:"spendmanager!addSpendInfo.action",
				success:function(data){
					var jsonVal = Ext.decode(data.responseText);
					var val = jsonVal.result;
					if(val == 'true'){
						Ext.Msg.alert('提示',"添加开销信息成功!",function(){
							sform.getForm().reset();
							addWin.hide();
							search();
						});
					}else{
						Ext.Msg.alert('提示',"添加开销信息失败!",function(){
							sform.getForm().reset();
							addWin.hide();
						});
					}
				},
				params:{
					type: v_type,
					price:v_price,
					sdate:v_date,
					sdesc:v_desc
				}
			});
			
		}
		
		
	}
	
});
